<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Favicon转换工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
            background-color: #fff;
        }
        .container {
            background-color: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .upload-area {
            border: 2px dashed #d1d5db;
            border-radius: 8px;
            padding: 40px;
            text-align: center;
            margin-bottom: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .upload-area:hover {
            border-color: #667eea;
            background-color: #f8fafc;
        }
        #fileInput {
            display: none;
        }
        #preview {
            text-align: center;
            margin: 25px 0;
        }
        #previewImg {
            max-width: 100%;
            max-height: 200px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .size-options {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin: 20px 0;
            flex-wrap: wrap;
        }
        .size-option {
            padding: 8px 16px;
            background: #edf2f7;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .size-option:hover {
            background: #e2e8f0;
        }
        .size-option.selected {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        button {
            border: none;
            padding: 12px 24px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 10px 5px;
            cursor: pointer;
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        #convertBtn, #downloadBtn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
        }
        #convertBtn:hover, #downloadBtn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
        }
        #convertBtn:disabled, #downloadBtn:disabled {
            background: #e2e8f0;
            color: #a0aec0;
            transform: none;
            box-shadow: none;
            cursor: not-allowed;
        }
        #resetBtn {
            background: #e2e8f0;
            color: #4a5568;
        }
        #resetBtn:hover {
            background: #cbd5e0;
        }
        .instructions {
            margin-top: 30px;
            padding: 20px;
            background-color: #f0f5ff;
            border-radius: 8px;
            border-left: 4px solid #667eea;
        }
        .file-info {
            margin-top: 15px;
            font-size: 14px;
            color: #4a5568;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="upload-area" id="uploadArea">
            <p style="font-size: 18px; font-weight: 500; margin-bottom: 8px;">选择您的图像</p>
            <p style="color: #718096; margin-top: 0;">支持 JPG, PNG, GIF, SVG 等格式</p>
            <input type="file" id="fileInput" accept="image/*">
        </div>
        
        <div id="preview" style="display: none;">
            <img id="previewImg">
            <div class="file-info">
                <p>原始尺寸: <span id="originalSize"></span></p>
            </div>
            
            <div class="size-options">
                <div class="size-option" data-size="16">16×16</div>
                <div class="size-option" data-size="32">32×32</div>
                <div class="size-option" data-size="48">48×48</div>
                <div class="size-option" data-size="64">64×64</div>
                <div class="size-option" data-size="128">128×128</div>
            </div>
        </div>
        
        <div style="text-align: center;">
            <button id="convertBtn" disabled>转换</button>
            <button id="downloadBtn" disabled>下载</button>
            <button id="resetBtn">重置</button>
        </div>
    </div>
    
    <div class="instructions">
        <h3 style="margin-top: 0; color: #2d3748;">使用说明:</h3>
        <ol style="padding-left: 20px; color: #4a5568;">
            <li>选择您的图像文件 (PNG, JPG, GIF 或 SVG)；</li>
            <li>选择您需要的 favicon 尺寸；</li>
            <li>点击"转换"按钮进行处理；</li>
            <li>转换完成后点击"下载"按钮获取文件</li>
            <li>将下载的 favicon.ico 文件放在您网站的根目录下，在网站页面的HEAD中通过以下代码使用：</li>
            <p><code>&lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon"&gt;</code></p>
        </ol>
    </div>

    <script>
        // 获取DOM元素
        const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('fileInput');
        const preview = document.getElementById('preview');
        const previewImg = document.getElementById('previewImg');
        const originalSize = document.getElementById('originalSize');
        const convertBtn = document.getElementById('convertBtn');
        const downloadBtn = document.getElementById('downloadBtn');
        const resetBtn = document.getElementById('resetBtn');
        const sizeOptions = document.querySelectorAll('.size-option');
        
        let originalFile = null;
        let convertedBlob = null;
        let selectedSize = 32; // 默认选择32x32
        
        // 点击选择区域触发文件选择
        uploadArea.addEventListener('click', () => {
            fileInput.click();
        });
        
        // 处理拖放功能
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.style.borderColor = '#667eea';
            uploadArea.style.background = '#f0f5ff';
        });
        
        uploadArea.addEventListener('dragleave', () => {
            uploadArea.style.borderColor = '#d1d5db';
            uploadArea.style.background = 'white';
        });
        
        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.style.borderColor = '#d1d5db';
            uploadArea.style.background = 'white';
            
            if (e.dataTransfer.files.length) {
                handleFile(e.dataTransfer.files[0]);
            }
        });
        
        // 处理文件选择
        fileInput.addEventListener('change', () => {
            if (fileInput.files.length) {
                handleFile(fileInput.files[0]);
            }
        });
        
        // 尺寸选择
        sizeOptions.forEach(option => {
            option.addEventListener('click', function() {
                sizeOptions.forEach(opt => opt.classList.remove('selected'));
                this.classList.add('selected');
                selectedSize = parseInt(this.dataset.size);
            });
        });
        
        // 默认选中32x32
        document.querySelector('.size-option[data-size="32"]').classList.add('selected');
        
        // 处理文件
        function handleFile(file) {
            if (!file.type.match('image.*')) {
                alert('请选择图像文件!');
                return;
            }
            
            originalFile = file;
            
            // 显示预览
            const reader = new FileReader();
            reader.onload = (e) => {
                previewImg.src = e.target.result;
                preview.style.display = 'block';
                
                // 获取图像尺寸
                const img = new Image();
                img.onload = function() {
                    originalSize.textContent = `${this.width} × ${this.height} 像素`;
                };
                img.src = e.target.result;
                
                // 启用转换按钮
                convertBtn.disabled = false;
                downloadBtn.disabled = true;
            };
            reader.readAsDataURL(file);
        }
        
        // 转换按钮点击事件
        convertBtn.addEventListener('click', () => {
            if (!originalFile) return;
            
            convertBtn.textContent = '转换中...';
            convertBtn.disabled = true;
            
            // 使用canvas进行转换
            const img = new Image();
            img.onload = function() {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                
                // 设置canvas尺寸为选中的尺寸
                canvas.width = selectedSize;
                canvas.height = selectedSize;
                
                // 绘制图像
                ctx.drawImage(img, 0, 0, selectedSize, selectedSize);
                
                // 转换为Blob对象
                canvas.toBlob((blob) => {
                    convertedBlob = blob;
                    convertBtn.textContent = '转换完成!';
                    downloadBtn.disabled = false;
                    
                    // 3秒后恢复按钮文本
                    setTimeout(() => {
                        convertBtn.textContent = '转换';
                        convertBtn.disabled = false;
                    }, 3000);
                }, 'image/png'); // 使用png格式，因为浏览器可能不支持直接生成ico
            };
            img.src = URL.createObjectURL(originalFile);
        });
        
        // 下载按钮点击事件
        downloadBtn.addEventListener('click', () => {
            if (!convertedBlob) return;
            
            const url = URL.createObjectURL(convertedBlob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `favicon-${selectedSize}x${selectedSize}.ico`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        });
        
        // 重置按钮点击事件
        resetBtn.addEventListener('click', () => {
            fileInput.value = '';
            preview.style.display = 'none';
            convertBtn.disabled = true;
            downloadBtn.disabled = true;
            convertBtn.textContent = '转换';
            originalFile = null;
            convertedBlob = null;
            
            // 重置尺寸选择
            sizeOptions.forEach(opt => opt.classList.remove('selected'));
            document.querySelector('.size-option[data-size="32"]').classList.add('selected');
            selectedSize = 32;
        });
    </script>
</body>
</html>